import { FC, useEffect, useState } from 'react';
import { Card, Tag, Space, Spin, Empty, Typography } from 'antd';
import {
  // EditOutlined,
  LeftOutlined,
  // RollbackOutlined,
} from '@ant-design/icons';
import { useParams, useNavigate } from 'react-router-dom';
import { industryReportApi } from 'services/industry-report';
import type {
  IndustryReportDetail,
  IndustryReportAttachment,
} from 'types/industry-report';
import ReactMarkdown from 'react-markdown';
import remarkBreaks from 'remark-breaks';

import MainLayout from '../../../components/MainLayout';
import AttachmentList from '../components/AttachmentList';

import styles from './index.module.css';

const ReportDetail: FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);
  const [report, setReport] = useState<IndustryReportDetail | null>(null);

  // 获取报告详情
  useEffect(() => {
    const fetchReportDetail = async () => {
      if (!id) return;
      setLoading(true);
      try {
        const res = await industryReportApi.getIndustryReportDetail(id);
        if (res.code === 200) {
          setReport(res.data);
        }
      } catch (error) {
        console.error('获取报告详情失败:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchReportDetail();
  }, [id]);

  // const typeMap = {
  //   industry: { text: '产业报告', color: 'blue' },
  //   phase: { text: '阶段报告', color: 'purple' },
  //   custom: { text: '自定义报告', color: 'green' },
  // };

  // const statusMap = {
  //   draft: { text: '草稿', color: 'orange' },
  //   published: { text: '已发布', color: 'green' },
  //   archived: { text: '已存档', color: 'blue' },
  // };

  if (!loading && !report) {
    return <Empty description="报告不存在" style={{ marginTop: 100 }} />;
  }

  const handlePreview = (file: IndustryReportAttachment) => {
    window.open(file.url);
  };

  return (
    <MainLayout>
      <Spin spinning={loading}>
        {report && (
          <Card
            title={
              <Space>
                <LeftOutlined
                  className={styles.backIcon}
                  onClick={() => navigate('/report')}
                />
                {report?.title}
              </Space>
            }
            // extra={
            //   <Space>
            //     <Button
            //       icon={<RollbackOutlined />}
            //       onClick={() => navigate('/report')}
            //     >
            //       返回
            //     </Button>
            //     <Button
            //       type="primary"
            //       icon={<EditOutlined />}
            //       onClick={() => navigate(`/report/edit/${id}`)}
            //     >
            //       编辑
            //     </Button>
            //   </Space>
            // }
          >
            {/* <Descriptions bordered>
              <Descriptions.Item label="报告类型">
                <Tag color={typeMap[report.type as keyof typeof typeMap].color}>
                  {typeMap[report.type as keyof typeof typeMap].text}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="作者">
                {report.author}
              </Descriptions.Item>
              <Descriptions.Item label="状态">
                <Tag
                  color={
                    report.status
                      ? statusMap[report.status as keyof typeof statusMap].color
                      : 'default'
                  }
                >
                  {report.status
                    ? statusMap[report.status as keyof typeof statusMap].text
                    : ''}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="创建时间">
                {report.createTime || ''}
              </Descriptions.Item>
              <Descriptions.Item label="更新时间">
                {report.updateTime || ''}
              </Descriptions.Item>
              <Descriptions.Item label="发布时间">
                {report.publishTime}
              </Descriptions.Item>
              <Descriptions.Item label="浏览次数">
                {report.viewCount || ''}
              </Descriptions.Item>
              <Descriptions.Item label="版本">
                {report.version || ''}
              </Descriptions.Item>
              <Descriptions.Item label="标签">
                {report.tags?.map((tag: string) => (
                  <Tag key={tag}>{tag}</Tag>
                ))}
              </Descriptions.Item>
            </Descriptions> */}

            {/* <Card title="报告摘要" className={styles.contentCard}>
              <div className={styles.content}>{report.summary || ''}</div>
            </Card> */}

            <Typography.Title
              level={2}
              style={{ marginBottom: 20, textAlign: 'center' }}
            >
              {report.title}
            </Typography.Title>

            <div className={styles.section}>
              <ReactMarkdown remarkPlugins={[remarkBreaks]}>
                {report.content}
              </ReactMarkdown>
            </div>

            {report.attachments?.length > 0 && (
              <Card title="附件" className={styles.contentCard}>
                <AttachmentList
                  attachments={report.attachments || []}
                  onPreview={handlePreview}
                />
              </Card>
            )}

            {report.references?.length > 0 && (
              <Card title="参考资料" className={styles.contentCard}>
                {report.references?.map((reference, index) => (
                  <div key={index} className={styles.reference}>
                    <a
                      href={reference.url}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      {reference.title}
                    </a>
                    <Tag>{reference.type}</Tag>
                  </div>
                ))}
              </Card>
            )}
          </Card>
        )}
      </Spin>
    </MainLayout>
  );
};

export default ReportDetail;
